<template>
    <div id="Detailed">
        <div class="detail-reserve">
            <div class="reserve-before">
                <i class="el-icon-phone-outline">咨询</i>
                <i class="el-icon-star-off">收藏</i>
            </div>
            <div class="reserve-begin">
                <router-link to='' class="begin-btn">
                    立即预定
                </router-link>
            </div>
        </div>
        <div class="TopLabel" :class="{TopLabelshow:showlabel}">
            <router-link to='/'><i class="el-icon-back"></i></router-link>
            <!-- <i class="el-icon-back"></i> -->
            <div class="anchor">
                <a  :class="{bod:showbod==1}" @click='tocomp("#OthDetInfo")'>商品</a>
                <a  :class="{bod:showbod==2}" @click='tocomp("#goodsdetails")'>详情</a>
                <a  :class="{bod:showbod==3}" @click='tocomp("#guesslike")'>推荐</a>
            </div>
            <i class="el-icon-share"></i>
        </div>
        <section id="detail-seaction">
            <div class="pic-detail">
                <div class="pic-det">
                    <img src="../../assets/details/主图.jpg" alt="">
                    <div class="to-home-hack">
                        <router-link to='/'>
                            <i class="el-icon-back"></i>
                        </router-link>
                        <router-link to=''>
                            <i class="el-icon-share"></i>
                        </router-link>
                    </div>
                    <p class="details-number">产品编号：{{thisInfo.detailNo}}-{{thisInfo.userview}}--{{thisInfo.isbuy}}</p>
                </div>
            </div>
            <div id="detail-title">
                <p class="detail-title-info">[端午]上海/南京/杭州直飞泰国曼谷/清迈5-7往返机票（非廉价航空，直飞航班，含免费行李额）</p>
                <div class="Pinfo">
                    <div class="Pinfo-money">
                        <span>{{thisInfo.money}}</span>起
                        <a>底价指南</a>
                    </div>
                    <div class="pinfo-msg">
                        <span>浏览&nbsp;{{thisInfo.userview}}</span>
                        <span>已售&nbsp;{{thisInfo.isbuy}}</span>
                    </div>
                </div>
            </div>
            <OthDetInfo></OthDetInfo>
            <goodsdetails></goodsdetails>
            <guesslike></guesslike>
        </section>
    </div>
</template>


<script type="text/javascript">
    import OthDetInfo from '@/components/details/OthDetInfo'
    import goodsdetails from '@/components/details/goodsdetails'
    import guesslike from '@/components/details/guesslike';
    export default {
        name:'Detailed',
        components:{
            "OthDetInfo":OthDetInfo,
            "goodsdetails":goodsdetails,
            "guesslike":guesslike
        },
        data(){
            return {
                thisInfo: this.$route.query,
                showlabel:false,
                showbod:1
            }
        },
        methods:{
            tocomp(arg){
                var arginfo = document.querySelector(arg);
                document.documentElement.scrollTop = arginfo.offsetTop             
            },
            handleScroll(){
                // var detailSeaction=document.querySelector("#detail-seaction");
                var docTop = document.documentElement.scrollTop
                
                
                var OthDetInfo = document.all.OthDetInfo
                var goodsdetails = document.all.goodsdetails
                var guesslike = document.all.guesslike


                var OthDetInfoTop = OthDetInfo.offsetTop
                var goodsdetailsTop = goodsdetails.offsetTop
                var guesslikeTop = guesslike.offsetTop

                // console.log(OthDetInfoTop);

                if(docTop>=OthDetInfoTop){
                    this.showlabel=true;
                    this.showbod=1;
                    // console.log("test"); 
                }else{
                    this.showlabel=false;
                }
                if(docTop>=goodsdetailsTop){
                    this.showbod=2;
                }
                if(docTop>=guesslikeTop){
                    this.showbod=3
                }
                // console.log(docTop);
            }
        },
        mounted(){
            
            window.addEventListener('scroll', this.handleScroll)
            
        }
    }


</script>


<style type="text/css" lang='less'>
    #Detailed{
        background-color: #f5f5f5;
        overflow-x: hidden;
        .detail-reserve{
            width:100vw;
            // background-color:red;
            position:fixed;
            z-index: 9999;
            bottom:0;
            display: flex;
            flex-wrap: nowrap;
            color:white;
            height: 4em;
            .reserve-before{
                background-color: #737373;
                width: 70%;
                line-height: 4em;
                height: 4em;
                i{
                    display: inline-block;
                    margin-left: 1.8em;    
                    font-size: 1.3em;                    
                }
            }
            .reserve-begin{
                background-color: #ff7467;
                width:30%;
                text-align: center;
                line-height: 4em;
                .begin-btn{
                    color:white;
                    font-size: 1.3em;
                }
            }
        }
        .TopLabel{
            transition: all 0.5s;
            position: fixed;
            padding:0 10px;
            height: 0px;
            line-height: 50px;
            overflow: hidden;
            background: white;
            border:1px solid rgba(0, 0, 0, 0.2);
            top:0;
            z-index: 9999;
            width: 100vw;
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 18px;
            i:last-child{
                font-size: 18px;
                color:#40c895;
            }
            .anchor{
                a{
                    display: inline-block;
                    padding:0 0.8em;
                }
                .bod{
                    border-bottom: 6px solid gray;
                }
            }
        }
        .TopLabelshow{
            height: 50px;
        }
        .pic-detail{
            width: 100vw;
            .pic-det{
                position: relative;
                width: 100vw;
                img{
                    width: 100%;
                }
                .to-home-hack{
                    display: flex;
                    justify-content: space-between;
                    width:100%;
                    position: absolute;
                    padding:10px 18px;
                    background-color: rgba(0, 0, 0, 0.1);
                    top:0;
                    i{
                        color:white;
                        font-size: 1.6em;
                    }
                }
                .details-number{
                    background-color: rgba(0, 0, 0, 0.1);
                    padding: 1.2em 0 0.8em 1.8em;
                    font-size: 0.8em;
                    margin-bottom: 0em;
                    position: absolute;
                    bottom:0;
                    color:white;
                }
            }
        }
        #detail-title{
            background-color: white;
            padding: 12px 12px 0 12px;
            p{
                margin:0
            }
            .detail-title-info{
                font-size: 1.15em;
                padding: 5px 0;
            }
            .detail-title-info:active{
                color:gray;
            }
            .Pinfo{
                display: flex;
                justify-content: space-between;
                padding-rignt: 5px;
                color:rgba(31,32,35,.4);
                .Pinfo-money{
                    span{
                        font-size: 1.3em;
                        color:pink;
                        display: inline-block;
                    }
                    a{
                        text-decoration: underline;
                        color:#40c895;;
                        display: inline-block;
                        margin-left: 0.3em;
                    }
                }
                .pinfo-msg{
                    font-size: 0.8em;
                    span{
                        display: inline-block;
                        margin-left: 1.2em;
                    }
                }
            }
        }
    }
</style>
